<!-- src/views/PostView.vue -->
<template>
  <div class="post-view">
    <div class="header">
      <h1 class="title">福州印象 · 游客分享墙</h1>
      <p class="subtitle">分享你的有福之旅，点亮榕城记忆</p>
    </div>

    <div class="board-container">
      <!-- 左侧：发帖区 -->
      <div class="post-section">
        <el-card shadow="never" class="post-card">
          <h3 class="post-title">发表你的福州之旅</h3>
          <el-form
            :model="postForm"
            :rules="rules"
            ref="postFormRef"
            @submit.prevent="submitPost"
          >
            <el-form-item prop="content">
              <el-input
                v-model="postForm.content"
                type="textarea"
                :rows="5"
                placeholder="分享你的福州旅行见闻、推荐景点或美食体验…（不少于15字）"
                maxlength="500"
                show-word-limit
              />
            </el-form-item>

            <el-form-item label="旅行体验评分" prop="rating">
              <el-rate
                v-model="postForm.rating"
                :max="5"
                allow-half
                show-score
                text-color="#ff9900"
              />
            </el-form-item>

            <el-form-item label="添加标签" prop="tags">
              <el-select
                v-model="postForm.tags"
                multiple
                allow-create
                default-first-option
                filterable
                placeholder="例如：#三坊七巷、#佛跳墙、#茉莉花茶"
                style="width: 100%;"
              />
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                native-type="submit"
                :loading="submitting"
                style="width: 100%;"
              >
                {{ submitting ? '发布中...' : '发 布 分 享' }}
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>

      <!-- 右侧：阅读区 -->
      <div class="feed-section">
        <h3 class="feed-title">最新分享 · 共 {{ posts.length }} 条</h3>

        <div v-if="posts.length === 0" class="empty">
          <el-empty description="暂无分享，快来成为第一个点亮榕城的人吧～" />
        </div>

        <div v-else class="posts-list">
          <PostItem
            v-for="(post, index) in paginatedPosts"
            :key="index"
            :post="post"
            @click="goToDetail(post)"
            @toggle-like="toggleLike(post)"
          />
        </div>

        <el-pagination
          v-if="posts.length > pageSize"
          small
          background
          layout="prev, pager, next"
          :total="posts.length"
          :page-size="pageSize"
          :current-page="currentPage"
          @current-change="handlePageChange"
          class="pagination"
        />
      </div>
    </div>

    <div class="footer">
      <p>© 2025 福州印象 · 有福之州，幸福之城</p>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import PostItem from '@/components/Post/PostItem.vue'

const router = useRouter()

// 模拟登录用户
const username = '福州旅人'

// 发帖表单
const postForm = reactive({
  content: '',
  rating: 5,
  tags: []
})
const postFormRef = ref(null)
const submitting = ref(false)

// 帖子列表
const posts = ref([
  {
    nickname: '闽江夜语',
    content: '夜游闽江太震撼了！灯光秀映照在江面上，配上微风，幸福感爆棚。推荐大家一定要来体验。',
    rating: 5,
    tags: ['闽江夜游', '灯光秀', '夜景'],
    time: Date.now() - 2 * 60 * 60 * 1000,
    views: 0,
    likes: 0,
    comments: 0,
    liked: false
  }
])

// 分页
const currentPage = ref(1)
const pageSize = 5
const paginatedPosts = computed(() => {
  const start = (currentPage.value - 1) * pageSize
  return posts.value.slice(start, start + pageSize)
})

// 表单验证
const rules = reactive({
  content: [
    { required: true, message: '请输入分享内容', trigger: 'blur' },
    { min: 15, message: '至少输入15个字', trigger: 'blur' }
  ],
  rating: [
    { required: true, message: '请为旅行体验评分', trigger: 'change' }
  ]
})

// 提交新帖
const submitPost = () => {
  postFormRef.value.validate(valid => {
    if (!valid) {
      ElMessage.error('请填写内容')
      return
    }
    submitting.value = true
    setTimeout(() => {
      posts.value.unshift({
        nickname: username,
        content: postForm.content,
        rating: postForm.rating,
        tags: [...postForm.tags],
        time: Date.now(),
        views: 0,
        likes: 0,
        comments: 0,
        liked: false
      })
      postFormRef.value.resetFields()
      postForm.tags = []
      postForm.rating = 5
      submitting.value = false
      ElMessage.success('发布成功！')
      currentPage.value = 1
    }, 800)
  })
}

// 点赞切换
const toggleLike = (post) => {
  if (post.liked) {
    post.likes--
  } else {
    post.likes++
  }
  post.liked = !post.liked
}

// 分页
const handlePageChange = (page) => {
  currentPage.value = page
}

// 跳转详情页（模拟）
const goToDetail = (post) => {
  // 实际项目中使用 router.push(`/post/${id}`)
  console.log('查看帖子详情:', post)
  // router.push(`/post/${post.id}`)
  router.push('/post')

}
</script>

<style scoped>
/* 与之前一致，可复用样式 */
.post-view { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }
.header { text-align: center; margin-bottom: 40px; }
.title { font-size: 32px; color: #006666; }
.subtitle { color: #666; }
.board-container { display: flex; gap: 30px; }
.post-section { flex: 1; max-width: 500px; }
.feed-section { flex: 2; background: white; border-radius: 16px; padding: 20px; }
.feed-title { font-size: 18px; margin: 0 0 20px 0; border-left: 4px solid #006666; padding-left: 12px; }
.empty { text-align: center; padding: 60px 0; }
.pagination { margin-top: 30px; justify-content: center; }
.footer { text-align: center; margin-top: 50px; color: #aaa; }

@media (max-width: 992px) {
  .board-container { flex-direction: column; align-items: center; }
  .post-section { max-width: 100%; }
}
</style>